<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: #6ff;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{str}}</p>
        <!-- 静态属性: 属性值是定死的 -->
        <p id="demo"  class="one" title="hello" data-index="0"></p>

        <!-- 单个绑定 参数名就是需要绑定的属性名 -->
        <!-- v-bind绑定动态属性: 属性值依赖于 1. data中对象属性名的属性值   2. javascript表达式的最终结果-->
        <!-- 1. v-bind指令的值 data中对象属性名的属性值或者javascript表达式 => 最终的值   2.将表达式的最终结果,赋值给指定属性  -->
        <p v-bind:id="idStr" v-bind:class="str" v-bind:title="titleStr"  v-bind:data-index="index"></p>

        <!-- v-bind绑定静态属性 -->
        <p v-bind:id="'demo'" v-bind:class="'one'" v-bind:title="'hello'"  v-bind:data-index="0"></p>

        <!-- 批量绑定  => 将属性名和属性值整合到对象中 -->
        <!-- v-bind直接绑定一个对象 (此时不能指定参数)  => 对象的属性名作为标签内的属性名,对象属性值作为标签内的属性值 -->
        <p v-bind="obj"></p>
    </div>
</body>
<script>
     // 指令   => 是标签的特殊属性 (写在标签内)
    // 指令 (Directives) 是带有 v-前缀的特殊 attribute, 指令 attribute 的值预期是单个 JavaScript 表达式  (v-for 是例外情况，稍后我们再讨论)
    // 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 注意:
    // 1. 指令是带有v-前缀的特殊属性(attribute),不同的指令有不同的作用(vue中定义好的)
    // 2. 指令 attribute 的值预期是单个 JavaScript 表达式  => 使用的是表达式的最终结果
    // 3. 指令的最终目的是操作dom, 且当表达式的值改变时,视图也会更新

    // Vue在解析模板语法过程中 发现标签出现以v-开头的特殊属性,则会取出属性值,作为javascript表达式解析 => 得到表达式的结果  => 在按功能使用表达式的结果

    
    // 指令的常见格式:
    // v-指令名    v-pre  v-clock
    // v-指令名="指令值"    v-html v-text v-show v-if
    // v-指令名:参数="指令值"    v-html v-text v-show v-if


    // v-html   设置标签内的html结构 (操作元素,改变元素的html结构 innerHTML)
    // v-text   设置标签内的文本 (操作元素,改变元素的文本 innerText)
    // v-pre    禁用文本插值 -> 此时{{xxxx}} 都会作为普通文本解析

    // v-clock   这个指令保持在元素上直到关联实例结束编译 (等Vue实例完成初始化渲染之后 会移除此属性 -> 这个指令可以配合属性选择器 => 可以隐藏未编译的双大括号语法(Mustache 标签)直到实例准备完毕。 )


    // v-if  v-else-if   v-else  根据指令的值,有条件的渲染元素  如果指令的值(表达式的结果)为true=>渲染该元素  否则就不渲染
    // v-show    根据指令的值,有条件的展示元素(切换元素的display)  如果指令的值(表达式的结果)为true=> display:block  否则就display:none;

    // 对比 v-if 和 v-show
    // 1. v-if  根据指令的值,有条件的渲染元素, 满足条件就渲染,否则就不渲染
    //    v-show 不管条件成立与否 元素最终都渲染了, 只不过满足条件的显示,不满足条件的隐藏(display:none)
    
    // 2. v-show 的初始渲染成本比较高(不管条件成立与否 元素最终都渲染了),切换成本低
    //    v-if   虽然初始渲染成本比较低(满足条件就渲染,否则就不渲染),切换成本比较高(每次生成元素和删除元素都要耗费浏览器的性能)

    // v-bind  将指令的值作为指定属性的属性值 => 可以给标签的某个属性绑定属性值
    // v-bind:参数="指令值"   => 参数: 需要绑定的属性
    // v-bind可以省略  => :参数="指令值"




    // v-for


</script>
<script>

    // 需求: 将data中对应属性名的属性值绑定到标签内,作为标签的属性值  => v-bind

    var vm = new Vue({
        el:"#app",
        data:{
            str:"one",
            idStr:"demo",
            titleStr:"hello",
            index:1,

            obj:{
                id:"demo",
                class:"one",
                title:"hello",
                "data-index":0,
            }
        }
    })

    setTimeout(()=>{
        vm.str="ONE";
        vm.idStr="DEMO";
        vm.titleStr="HELLO";
        vm.index="100";
    },2000)





</script>
</html>